<template>
	<view class="change-pwd-container">
		<view class="change-pwd-box">
			<!-- <view class="image-container">
				<image src="/static/icon/password.png" mode="aspectFit" class="pwd-image-top"></image>
				<image src="/static/icon/password2.png" mode="aspectFit" class="pwd-image"></image>
			</view> -->
			
			<uni-forms :modelValue="formData">
				<uni-forms-item>
					<uni-easyinput
						v-model="formData.username"
						placeholder="用户名"
						:clearable="true"
						prefixIcon="person"
						:inputBorder="false"
						:disabled="true"
					/>
				</uni-forms-item>
				
				<uni-forms-item>
					<uni-easyinput
						v-model="formData.oldpassword"
						type="password"
						placeholder="原密码"
						:clearable="true"
						prefixIcon="locked"
						:inputBorder="false"
					/>
				</uni-forms-item>
			
			
			<button class="submit-btn" type="primary" @click="handleChangePwd">确认修改</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { CONFIG } from '../../utils/config'
import { userStore } from '../../store/userStore'

const store = userStore()
const formData = ref({
	username: '',
	oldpassword: '',
	newpassword: '',
	confirmPassword: ''
})

onMounted(() => {
	// 自动填充用户名
	formData.value.username = store.userInfo.username
})

async function handleChangePwd() {
	// 表单验证
	if (!formData.value.oldpassword || !formData.value.newpassword || !formData.value.confirmPassword) {
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		})
		return
	}
	

	
	try {
		const res = await uni.request({
			url: `${CONFIG.base_url}/changePwd`,
			method: 'POST',
			data: {
				username: formData.value.username,
				oldpassword: formData.value.oldpassword,
				newpassword: formData.value.newpassword
			},
			header: {
				'Authorization': `Bearer ${store.userInfo.token}`
			}
		})
		
		console.log('修改密码响应:', res)
		
		if (res.data.code === 200) {
			uni.showToast({
				title: res.data.message || '密码修改成功',
				icon: 'success'
			})
			
			// 修改密码成功后，退出登录

	}
}
</script>

<style lang="scss" scoped>
.change-pwd-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 40rpx;
	
	.change-pwd-box {
		padding: 40rpx;
		margin-top: 60rpx;
		
		.image-container {
			text-align: center;
			margin-bottom: 60rpx;
			
			.pwd-image-top {
				height: 100rpx;
				width: 400rpx;
				margin-bottom: 20rpx;
			}
			
			.pwd-image {
				height: 80rpx;
				width: 300rpx;
			}
		}
		
		.submit-btn {
			margin-top: 60rpx;
			width: 100%;
			background: linear-gradient(to right, #007AFF, #0056b3);
			border: none;
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}

:deep(.uni-forms-item) {
	margin-bottom: 30rpx;
	
	.uni-forms-item__content {
		background-color: #f8f8f8;
		border-radius: 8rpx;
	}
}

:deep(.uni-easyinput__content) {
	background-color: transparent;
	height: 88rpx;
	padding-left: 20rpx;
	
	.uni-icons {
		color: #666;
	}
	
	.uni-easyinput__content-input {
		font-size: 28rpx;
	}
}

:deep(.is-input-border) {
	border: none;
}

:deep(.uni-forms-item) {
	transition: all 0.3s ease;
	
	&:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
}
</style> 